<!DOCTYPE html>
<html>
<head>
    <% include ../include/css_header.html %>
    <style>
        .order-img, .order-info{
            float: left;
            margin-right: 5px;
            height: 56px;
        }
        .order-info{
        }
        .order-opt{
            position: absolute;
            right: 30px;
            color: #CCCCCC;
            font-size: 20px;
            top: 30px;
        }
        .order-info h4{
            margin-top: 5px;
        }
        .contact{
            font-size: 12px;padding-left: 10px;
        }
        .nav-tabs a{
            color: #ffffff;
        }
    </style>
</head>
<body class="actlist_bg">
<div class="container" style="min-height:640px">
    <div class="row">
        <div style="position: fixed;top: 10px;z-index: 10;" class="col-xs-12">
            <a class="icon-arrow-left" style="color: #ffffff;font-size: 24px;" href="/user"></a>
            <!--<a class="icon-cog" id="order_opt" style="color: #ffffff;font-size: 24px;float: right;" href="javascript:showOptMenu();"></a>-->
        </div>
    </div>
    <div style="height: 40px;"></div>
    <div class="font_shadow_133000" style="text-align: center;color: #ffffff;">
        <h2><strong>我的订单</strong></h2>
    </div>
    <ul class="nav nav-tabs" role="tablist">
        <li class="<%=status==='waiting'?'active':''%>"><a href="/myOrder/waiting">未支付订单</a></li>
        <li class="<%=status==='pay'?'active':''%>"><a href="/myOrder/pay">已支付订单</a></li>
        <li class="<%=status==='finish'?'active':''%>"><a href="/myOrder/finish">已结束订单</a></li>
    </ul>
    <div class="tab-content" style="min-height: 400px;">
        <div class="tab-pane active" id="order_list">
            <% if(orders.length > 0){ %>
            <% orders.forEach(function(order){
                var goods = order.goodsList[0];
            %>
            <div class="row" id="o_<%=order._id %>">
                <div class="col-xs-12">
                    <div class="bg_white_panel order-item" style="margin-top: 10px;" data-id="<%=order._id %>">
                        <div class="order-img">
                            <img src="/goods/<%=order.faction._id %>_<%=order.goodsList[0].goodsId %>.jpg" class="img-rounded" style="width: 56px;height: 56px;"/>
                        </div>
                        <div class="order-info">
                            <div><strong>订单好啊</strong></div>
                            <div>
                                <strong style="color: #FE8125">￥<%=order.totalFee%></strong>
                                成交时间:<a><%=dateUtil.formatDateNew(order.creatTime, 'MM/dd hh:mm') %></a>
                            </div>
                            <div>圈子:<a><%=order.faction.name %></a></div>
                        </div>
                        <!-- <div class="off-tag">已下架</div>-->
                        <div class="order-opt">
                            <%if(order.status === 'waiting'){%>
                            <button type="button" class="btn btn-success toPayBtn">去支付</button>
                            <%}%>
                            <%if(order.status === 'pay'){%>
                            <button type="button" class="btn btn-warning finishBtn">结束</button>
                            <%}%>
                            <%if(order.status === 'finish'){%>
                           <!-- <input type="checkbox" name="goodsId" value="<%=order._id%>" />-->
                            <div class="icon-arrow-right detailBtn"></div>
                            <%}%>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <% }) %>
            <% } %>
        </div>
    </div>
    <div class="modal fade" id="orderOpts" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <%if(/waiting|pay/.test(status)){%>
                    <button type="button" class="btn btn-default btn-lg btn-block" id="finishOrderBtn">结束订单</button>
                    <%}%>
                    <%if(/finish/.test(status)){%>
                    <button type="button" class="btn btn-default btn-lg btn-block" id="delOrderBtn">删除订单</button>
                    <%}%>
                </div>
            </div>
        </div>
    </div>
    <% include ../include/copyright.html %>
</div>
<% include ../include/js_footer.html %>
<script>
    $(function(){
        $('.detailBtn').on('click', function(e){
            var id = $(this).parent().parent().data('id');
            window.location.href = '/showOrder/'+id;
        })
        $('.toPayBtn').on('click', function(){
            var id = $(this).parent().parent().data('id');
            window.location.href = '/showOrder/'+id;
        });
        $('.finishBtn').on('click', function(){
            var id = $(this).parent().parent().data('id');
            finishOrder(id);
        })
    })
    function finishOrder(id){
        $.post('/setOrderStatus', {ids: [id], status: 'finish'}, function(res){
            if(!res.error){
                AlertBox.showTip('结束订单')
                $('#o_'+id).remove();
            }
        })
    }
    function showOptMenu(){
        $('#orderOpts').modal('show');
    }
</script>
</body>
</html>